<template>
  <div class="container journal_search">
    <Header
      :keyword="queryParams.keyword"
      :keywordType="queryParams.keywordType"
      @search="handleSearch"
    />
    <Content
      :loading="loading"
      :total="total"
      :tableData="tableData"
      @handle-current-change="handleCurrentChange"
      @handle-sort-change="handleSortChange"
    />
  </div>
</template>
<script setup>
import { ref, onMounted, provide } from 'vue'
import Header from './componetns/Header.vue'
import Content from './componetns/Content.vue'
import { searchApi } from '@/api/list'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
// 表单数据
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  total: '',
  keywordType: 'title',
  keyword: '',
  ifStart_2019: '',
  ifEnd_2019: '',
  ifStart: '',
  ifEnd: '',
  jcr: '',
  sub: '',
  trrl: '',
  trrr: '',
  categoryId: '1e78b26454e2878930f44c6a571be497',
  selfCitingRate: 'all',
  compatriotRate: 'all',
  totalReviewRatio: 'all',
  isDomestic: '',
  recommend: 0,
  selfStart: '',
  selfEnd: '',
  numberStart: '',
  numberEnd: '',
  order: '',
  orderType: '',
})
const getTableData = async () => {
  loading.value = true
  try {
    const res = await searchApi.getList(queryParams.value)
    total.value = res.data.data_original.total
    tableData.value = res.data.data_original.data
  } catch (err) {
    console.log(err)
  } finally {
    loading.value = false
  }
}
// 搜索
const handleSearch = (keyword, keywordType) => {
  queryParams.value.pageNum = 1
  queryParams.value.keyword = keyword
  queryParams.value.keywordType = keywordType
  queryParams.value.categoryId = ''
  // 更新路由的查询参数
  router.push({
    name: 'search',
    query: queryParams.value,
  })
  getTableData()
}
// 当前页码变化
const handleCurrentChange = (value) => {
  queryParams.value.pageNum = value
  // 更新路由的查询参数
  router.push({
    name: 'search',
    query: queryParams.value,
  })
  getTableData()
}
// 排序变化
const handleSortChange = (order, orderType) => {
  // console.log(order, orderType)
  queryParams.value.order = order
  queryParams.value.orderType = orderType
  router.push({
    name: 'search',
    query: queryParams.value,
  })
  getTableData()
}
// 影响因子
const handleIfChange = (start, end) => {
  queryParams.value.ifStart_2019 = start
  queryParams.value.ifEnd_2019 = end
  router.push({
    name: 'search',
    query: queryParams.value,
  })
  getTableData()
}
// 国际分区
const handleJCRChange = (value) => {
  queryParams.value.jcr = value
  queryParams.value.total = total.value
  // queryParams.value.order = ''
  // queryParams.value.orderType = ''
  // 更新路由的查询参数
  router.push({
    name: 'search',
    query: queryParams.value,
  })
  getTableData()
}
// 国内分区
const handleSUBChange = (value) => {
  queryParams.value.sub = value
  queryParams.value.total = total.value
  // 更新路由的查询参数
  router.push({
    name: 'search',
    query: queryParams.value,
  })
  getTableData()
}
// 综述占比
const handleTotalReviewChange = (value, trrl, trrr) => {
  queryParams.value.totalReviewRatio = value
  queryParams.value.trrl = trrl
  queryParams.value.trrr = trrr
  queryParams.value.total = total.value
  // 更新路由的查询参数
  router.push({
    name: 'search',
    query: queryParams.value,
  })
  getTableData()
}
onMounted(() => {
  // 从路由的查询参数中获取值并初始化 queryParams
  const { query } = route
  for (const key in queryParams.value) {
    if (query[key]) {
      // total重置为0
      queryParams.value.total = 0
      if (query.keywordType !== 'title') queryParams.value.categoryId = ''
      queryParams.value[key] = query[key]
    }
  }
  getTableData()
})
provide('handleJCRChange', handleJCRChange)
provide('handleSUBChange', handleSUBChange)
provide('handleTotalReviewChange', handleTotalReviewChange)
provide('handleIfChange', handleIfChange)
</script>
<style scoped lang="scss">
:deep() {
  .el-input {
    --el-input-border-color: #fff;
    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  }
  .el-input-group__append,
  .el-input-group__prepend {
    border-radius: 0;
    background-color: #fff;
    border-color: #fff;
  }
  .el-input-group__prepend {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
  }
  .el-input-group__append button {
    font-size: 20px;
    color: #fff;
    border-radius: 0;
    background-color: var(--el-color-primary);
    height: 100%;
  }
  .el-input-group__append:hover {
    background-color: var(--el-color-primary);
    color: #fff;
  }
  .el-select__wrapper {
    box-sizing: content-box;
  }
}
.journal_search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
</style>
